<template>
  <div>
    <h3>custom</h3>
    <h4>{{ str }}</h4>
    <h4>子组件传递的玩具: {{ str }}</h4>
    <br>
    <button @click="test(6,7,$event)">点我,事件对象</button>
    <button @click="test2">点我,换字</button>
    <button @click=" str = $event">点我,换字</button>
    <br><br>
    <!-- 给子组件child绑定自定义事件 -->
    <Child @sendToy="saveToy" />
  </div>
</template>

<script setup lang="ts">
import Child from './child.vue'
import { ref } from 'vue';
let str = ref('你好')
const test = (a:any,b:any,c:any) => {
  // 没有参数传递的情况下, @click='test()' 
  // const test = (e) => {} ...  e就是事件对象
  // 当有参数传递的情况下, 需要用$event @click='test(6,7,$event)' 
  console.log(c) // 事件对象
}

const test2 = () => {
  str.value = '哈哈'
}

const saveToy = (val:string) => {
  console.log('父组件xyz触发了', val)
  str.value = val
}


</script>

<style scoped>

</style>